<!-- 
  qm-puzzle-code基于puzzle-code拼图验证码组件，添加触发按钮
  用法：
    简易：
      <qm-puzzle-code
        v-model="loginForm.puzzleComplete"
        @success="puzzleSuccess"
      />
    完整：
      <qm-puzzle-code
        v-model="complete"
        :img-width="imgWidth"
        :img-height="imgHeight"
        :slider-size="sliderSize"
        :success-text="successText"
        :fail-text="failText"
        :slider-text="sliderText"
        :border-radius="borderRadius"
        :build-puzzle-code-url="buildPuzzleCodeUrl"
        :build-puzzle-code-method="buildPuzzleCodeMethod"
        :verify-code-url="verifyCodeUrl"
        :verify-code-method="verifyCodeMethod"
        :reset-img="resetImg"
        @success="success"
        @close="close"
        @fail="fail"
        @masked="masked"
      />
  说明：
    属性：
      v-model(value)：绑定一个boolean值，用来控制是否完成校验
      completeBtnText: 完成校验提示
      noCompleteBtnText: 未完成校验提示
      imgWidth: 图片宽度，默认280，单位px
      imgHeight: 图片高度，默认150，单位px
      sliderSize: 滑块大小，默认35，单位px
      successText: 验证成功提示
      failText: 验证失败提示
      sliderText: 滑块提示
      borderRadius: 圆弧，默认10，单位px
      buildPuzzleCodeUrl：验证码图片接口，默认"/login/getPuzzleVerificationCode"
      buildPuzzleCodeMethod：验证码图片接口请求方式，默认get
      verifyCodeUrl: 验证码验证接口，默认"/login/puzzleVerifyCode/verify"
      verifyCodeMethod: 验证码验证接口请求方式，默认get
      resetImg: 重置按钮图片地址
    事件：
      success：验证成功回调
      fail：验证失败回调
      masked：点击遮罩层回调
      close：点击关闭回调
-->
<template>
  <div>
    <el-button
      v-if="complete"
      type="success"
      disabled
      plain
      style="width: 100%"
    >
      {{ completeBtnText }}
    </el-button>
    <el-button v-if="!complete" style="width: 100%" @click="completeHandle">
      {{ noCompleteBtnText }}
    </el-button>
    <puzzle-code
      v-model="visible"
      :img-width="imgWidth"
      :img-height="imgHeight"
      :slider-size="sliderSize"
      :success-text="successText"
      :fail-text="failText"
      :slider-text="sliderText"
      :border-radius="borderRadius"
      :build-puzzle-code-url="buildPuzzleCodeUrl"
      :build-puzzle-code-method="buildPuzzleCodeMethod"
      :verify-code-url="verifyCodeUrl"
      :verify-code-method="verifyCodeMethod"
      :reset-img="resetImg"
      @success="success"
      @close="close"
      @fail="fail"
      @masked="masked"
    />
  </div>
</template>

<script>
import PuzzleCode from "./puzzle-code";
export default {
  name: "qm-puzzle-code",
  components: {
    PuzzleCode,
  },
  props: {
    value: {
      type: Boolean,
      required: true,
      default: false,
    },
    completeBtnText: {
      type: String,
      require: false,
      default: "已完成图片验证",
    },
    noCompleteBtnText: {
      type: String,
      require: false,
      default: "点击完成图片验证",
    },
    imgWidth: {
      type: Number,
      require: false,
    },
    imgHeight: {
      type: Number,
      require: false,
    },
    sliderSize: {
      type: Number,
      require: false,
    },
    successText: {
      type: String,
      require: false,
    },
    failText: {
      type: String,
      require: false,
    },
    sliderText: {
      type: String,
      require: false,
    },
    borderRadius: {
      type: Number,
      require: false,
    },
    buildPuzzleCodeUrl: {
      type: String,
      require: false,
    },
    buildPuzzleCodeMethod: {
      type: String,
      require: false,
    },
    verifyCodeUrl: {
      type: String,
      require: false,
    },
    verifyCodeMethod: {
      type: String,
      require: false,
    },
    resetImg: {
      type: String,
      require: false,
      default: undefined,
    },
  },
  data() {
    return {
      visible: false,
      complete: false,
    };
  },
  watch: {
    value(v) {
      if (this.complete != v) {
        this.complete = v;
      }
    },
  },
  methods: {
    success(event) {
      this.visible = false;
      this.$emit("success", event);
    },
    close() {
      this.visible = false;
      this.$emit("close");
    },
    fail(event) {
      this.$emit("fail", event);
    },
    masked() {
      this.$emit("masked");
    },
    completeHandle() {
      this.visible = true;
    },
  },
};
</script>

<style scoped>
</style>
